<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>图片加载平移放大缩小示例</title>
    <link rel="stylesheet" href="http://www.ytbuyer.com/style/commons/reset.css">
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="vendor/jquery/dist/jquery.js"></script>
    <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
    <script src="vendor/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lNnmM8dmovZvKZ2TGKtFw0znVdM469p0"></script>
    <script src="js/index.js"></script>
</head>

<body>

<div class="btn-group p-a temporary">
    <button class="btn btn-default panorama">全景</button>
    <button class="btn btn-default video">视频</button>
    <button class="btn btn-default sensor">传感器</button>
    <button class="btn btn-default agricultural" >农产品1</button>
    <button class="btn btn-default grow">生长情况</button>
</div>


<!--地图展示-->
<div class="map-pos t-c" id="allmap"></div>

<div class="tool-info p-a tool-pos">
    <dl class="dl-horizontal">
        <dt class="c-p" id="showFarm">
            <button class="farm"><img src="./images/s-layer.png" class="science-btn">&nbsp;&nbsp;选择图层</button>
        </dt>
    </dl>
</div>

<div class="search-box p-a index-w">
    <div class="panel panel-primary serbox-bg box-bor">
        <!--<div class="panel-heading">搜索结果</div>-->
        <div class="panel-body">

            <div class="font-wet c-info">
                <p class="col-lg-12">云峰有机蔬菜种植基地</p>
                <ul>
                    <li class="col-lg-6">湖北·武汉</li>
                    <li class="col-lg-6">占地面积：189亩</li>
                </ul>
                <ul>
                    <li class="col-lg-4">作物：36种</li>
                    <li class="col-lg-4">传感器：42个</li>
                    <li class="col-lg-4">摄像头：36个</li>
                </ul>
            </div>

            <hr/>

            <div class="col-lg-12">
                <div class="media">
                    <span class="media-left "><img src="./images/weather.png" class="media-object"/></span>
                    <div class="media-body font-wet media-pad-l">
                        <div><em class="we-ft">12 - 21°c</em> 多云转晴天</div>
                        <br/>
                        <div>湖北 · 武汉<span class="badge-success">无污染</span></div>
                    </div>
                </div>
                <h3></h3>
            </div>

            <ul class="quota font-wet attheight">
                <li class="col-lg-6 text-center">海拔424.07m</li>
                <li class="col-lg-6 text-center">纬度34°36'0.00"</li>
            </ul>

            <ul class="quota">
                <li class="col-lg-4">
                    <img src="./images/heat.png" class="img-responsive">
                </li>
                <li class="col-lg-4">
                    <img src="./images/frost.png" class="">
                </li>
                <li class="col-lg-4">
                    <img src="./images/cold.png" class="">
                </li>
            </ul>

            <div class="text-center"><img src="./images/water.png"></div>

            <h5 class="font-wet">农场点评 (3)</h5>

            <ul class="list-group" id="third">
                <li class="list-group-item no-pad-w no-bg no-border font-wet">
                    <div class="list-group-item-text">
                        <ul class="media-list">
                            <li class="media">
                                <div class="media-body">
                                    <p>
                                        该农场位于北京市顺义区，农场周边空气清新，水源纯净，土壤肥沃有机质含量高营养丰富，适合作物的种植。农场管理体系完善，有专业的种植指导员对生产进行指导。农场不经发展种植业，还发展休闲农业，提供旅游、食宿、采摘等项目。</p>
                                </div>
                                <hr/>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="info-list p-a info-list-h" id="farm" style="display: none;">
    <h3></h3>
    <dl class="dl-box">
        <dt class="col-lg-12">区域</dt>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">基地</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">分区</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
    </dl>
    <dl class="dl-box">
        <dt class="col-lg-12">地块</dt>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">大棚</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">大田</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">果树</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">池塘</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">养殖</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">作物</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
    </dl>
    <dl class="dl-box">
        <dt class="col-lg-12">区域</dt>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">基地</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">分区</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
    </dl>
    <dl class="dl-box">
        <dt class="col-lg-12">区域</dt>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">基地</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
        <dd class="col-lg-12"><span class="col-lg-6 nc-name check-ht decompose"><span
                class="field">分区</span></span><span class="col-lg-6 text-right check-ht check-line"><input
                type="checkbox"/></span></dd>
    </dl>
</div>

<div class="control-pro p-a" id="agriculturalShow" style="display: none">
    <div class="quota p-r">
        <span class="col-lg-3 p-r"><img src="./images/img-baicai.png" class="img-circle p-a media-img"/></span>
        <div class="col-lg-9">
            <dl class="tit-info font-wet">
                <dt class="col-lg-12">小白菜</dt>
                <dd class="col-lg-6">作物品种：短梗青菜</dd>
                <dd class="col-lg-6">产量/预计产量：50kg</dd>
            </dl>
        </div>
        <span class="p-a x-close c-p"><img src="./images/x-close.png" /></span>
    </div>
    <div class="quota">
        <div class="hr-tit">&nbsp;&nbsp;&nbsp;&nbsp;产品指标:</div>
        <hr class="hr-line"/>
        <div class="col-lg-3 text-center index-tit">
            <i class="font-blue">外观</i><br/>
            <p class="font-wet">无伤痕、无腐烂、无虫蛀，鲜红或深红色；</p>
        </div>
        <div class="col-lg-3 text-center index-tit">
            <i class="font-blue">口感</i>
            <p class="font-wet">果肉硬脆、味甜爽口、没有异味；</p>
        </div>
        <div class="col-lg-3 text-center index-tit">
            <i class="font-blue">千克重量</i>
            <p class="font-wet">果径≥26mm，每粒≥7克，每穗80~100粒；</p>
        </div>
        <div class="col-lg-3 text-center index-tit last-index">
            <i class="font-blue">营养品质</i>
            <p class="font-wet">一级</p>
        </div>
    </div>
    <div class="quota">
        <div class="hr-tit">&nbsp;&nbsp;&nbsp;&nbsp;产品认证:</div>
        <hr class="hr-line"/>
        <div class="col-lg-3 text-center index-tit index-no-bor font-wet">
            <img src="./images/cert.png" /><br/>有机认证
        </div>
        <div class="col-lg-3 text-center index-tit index-no-bor font-wet">
            <img src="./images/cert.png" /><br/>有机认证
        </div>
        <div class="col-lg-3 text-center index-tit index-no-bor font-wet">
            <img src="./images/cert.png" /><br/>有机认证
        </div>
        <div class="col-lg-3 text-center index-tit index-no-bor font-wet">
            <img src="./images/cert.png" /><br/>有机认证
        </div>
    </div>
</div>

<div class="control-pro pro-detail p-a" id="growShow" style="display: none">
    <div class="quota p-r">
        <span class="col-lg-3 p-r"><img src="./images/img-baicai.png" class="img-circle p-a media-img"/></span>
        <div class="col-lg-9">
            <dl class="tit-info font-wet">
                <dt class="col-lg-12">小白菜</dt>
                <dd class="col-lg-6">作物品种：短梗青菜</dd>
                <dd class="col-lg-6">产量/预计产量：50kg</dd>
            </dl>
        </div>
        <span class="p-a x-close c-p"><img src="./images/x-close.png" /></span>
    </div>
    <div class="quota">
        <div class="col-lg-offset-2 col-lg-10 l-hen"><img src="./images/grow1.png"/><span>定植时间：2017-9-15</span></div>
        <div class="col-lg-offset-2 col-lg-10 l-hen"><img src="./images/grow2.png"/><span>开始采收： 2017-10-15</span></div>
        <div class="col-lg-offset-2 col-lg-10 l-hen"><img src="./images/grow3.png"/><span>种植结束：2017-11-10</span></div>
    </div>
</div>

<div class="control-pro p-a" id="sensorShow" style="display: none">
    <div class="quota p-r">
        <span class="col-lg-3 p-r"><img src="./images/img-baicai.png" class="media-object img-thumbnail"/></span>
        <div class="col-lg-9">
            <dl class="tit-info font-wet">
                <dt class="col-lg-12">传感器001          A-1</dt>
                <dd class="col-lg-12">编号：A10245FG2544005</dd>
                <dd class="col-lg-12">采集时间：2017-11-20 16:17:32</dd>
            </dl>
        </div>
        <div class="p-a x-close font-wet x-pos c-p"><span class="glyphicon glyphicon-remove"></span></div>
    </div>
    <div class="quota font-wet icon-pro">
        <div class="col-lg-4 text-center">气温：13.8℃</div>
        <div class="col-lg-4 text-center">露点：6.0</div>
        <div class="col-lg-4 text-center">湿度：59.1%</div>
    </div>
    <div class="quota">
        <div class="col-lg-4 text-center index-tit">
            <p><img src="./images/icon-map.png"/></p>
            <p class="font-wet">土壤温度</p>
            <p class="font-wet">16.5℃</p>
        </div>
        <div class="col-lg-4 text-center index-tit">
            <p><img src="./images/icon-sun.png"/></p>
            <p class="font-wet">太阳</p>
            <p class="font-wet">2305LUX</p>
        </div>
        <div class="col-lg-4 text-center index-tit last-index">
            <p><img src="./images/icon-sd.png"/></p>
            <p class="font-wet">二氧化碳</p>
            <p class="font-wet">0ppm</p>
        </div>
    </div>
</div>

<div class="control-pro p-a" id="panoramaShow" style="display: none">
    <div class="quota p-r text-center quota-pad">
        <p><img src="./images/panorama.png" /></p>
        <p class="text-left font-wet">草莓种植总面积为23亩，有牛奶草莓、丰香、红颜、女峰等多个品种，可游园采。</p>
        <div class="p-a x-close font-wet x-pos c-p"><span class="glyphicon glyphicon-remove"></span></div>
    </div>
</div>

<div class="control-pro p-a pro-quota-w" id="videoShow" style="display: none">
    <div class="quota p-r text-center quota-pad">
        <h4 class="font-wet">摄像头001</h4>
        <p><img src="./images/vedio.png" /></p>
        <div class="text-left font-wet"><span class="f-r">编号：TD02458A033</span>位置：A区  A-1</div>
        <div class="p-a x-close font-wet x-pos c-p"><span class="glyphicon glyphicon-remove"></span></div>
    </div>
</div>

<div class="ewm p-a text-center">
    <p><a href="newFarm.html"><img src="./images/ewm.png" /></a></p>
    <p class="font-wet">手机农场秀</p>
</div>

<div class="product-list p-a">
    <div class="pro-btn-tit c-p" id="up-down">农场产品</div>
    <span class="col-lg-1 col-md-1 col-sm-2 pro-previous" id="leftArr"></span>
    <ul class="col-lg-10 col-md-10 col-sm-8 pro-com" id="isl_cont_1">
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
            <strong class="p-a font-wet">有机</strong>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
            <strong class="p-a font-wet">绿色</strong>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class="img-rounded">
            <span>小白菜</span>
        </li>
        <li class="col-lg-1 col-md-1 col-sm-2 c-p">
            <img src="./images/img-baicai.png" class=" img-rounded">
            <span>小白菜</span>
        </li>
    </ul>
    <span class="col-lg-1 col-md-1 col-sm-2 pro-next" id="rightArr"></span>
</div>

</body>
</html>